<script setup lang="ts">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter, useRoute } from 'vue-router'
import { getInfoApi } from '@/api/currency'
import { CurdData } from '@/api/currency/types'
import { Descriptions } from '@/components/Descriptions'
import useSchema from './components/hooks/useSchema'
import { useCrudSchemas } from '@/hooks/web/useCrudSchemas'

const { push, go } = useRouter()

const { query } = useRoute()

const { t } = useI18n()

const currentRow = ref<Nullable<CurdData>>(null)

const getBrandInfo = async () => {
  const res = await getInfoApi(query.id as string)
  if (res) {
    currentRow.value = res.data
  }
}

getBrandInfo()

const { crudSchemas } = useSchema()
const { allSchemas } = useCrudSchemas(crudSchemas)
</script>

<template>
  <ContentDetailWrap :title="t('currency.detail')" @back="push('/currency/currency-management')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <Descriptions :schema="allSchemas.detailSchema" :data="currentRow || {}" />
  </ContentDetailWrap>
</template>

<style lang="less">
@import url('@/styles/global.less');
</style>
